<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | User Profile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" th:href="@{/plugins/selectize/css/selectize.default.css}">

    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/css/adminlte.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/plugins/fontawesome-free/css/all.min.css}">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" href="index.html">
                    <i class="fa fa-paper-plane"></i>
                    <span>博客前台首页</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <h1>
            <a th:href="@{index}" class="brand-link">
                <img src="./upload/avatar.jpg" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light">WhyBlog</span>
            </a>
        </h1>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">仪表盘</li>
                    <li class="nav-item">
                        <a th:href="@{/admin/dashboard}" class="nav-link">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>仪表盘</p>
                        </a>
                    </li>
                    <!--          博客发布部分-->
                    <li class="nav-header">博客编辑</li>
                    <li class="nav-item">
                        <a th:href="@{/admin/addBlog}" class="nav-link">
                            <i class="nav-icon fas fa-edit"></i>
                            <p>发布博客</p>
                        </a>
                    </li>
                    <!--          博客管理-->
                    <li class="nav-header">管理模块</li>
                    <li class="nav-item">
                        <a th:href="@{/admin/blog-mgr}" class="nav-link ">
                            <i class="fa fa-list-alt nav-icon" aria-hidden="true"></i>
                            <p>博客管理</p>
                        </a>
                    </li>

                    <li class="nav-item">
                        <a th:href="@{/admin/type-mgr}" class="nav-link active">
                            <i class="fa fa-bookmark nav-icon" aria-hidden="true"></i>
                            <p>分类管理</p>
                        </a>
                    </li>

                    <li class="nav-header">系统管理</li>
                    <li class="nav-item">
                        <a th:href="@{/admin/config}" class="nav-link">
                            <i class="fa fa-wrench nav-icon"></i>
                            <p>系统配置</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a th:href="@{/admin/exit}" class="nav-link">
                            <i class="fa fa-sign-out-alt nav-icon"></i>
                            <p>安全退出</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!-- /.col -->
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">分类列表</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body table-responsive p-0">
                            <table class="table table-hover text-nowrap table-bordered">
                                <thead>
                                <tr>
                                    <th width="5%">Id</th>
                                    <th>分类名称</th>
                                    <th class="text-center" width="15%">
                                        操作
                                        <button class="btn btn-xs btn-info ml-2" data-toggle="modal"
                                                data-target="#addCategoryModal">
                                            <i class="fa fa-plus"></i>
                                            新增
                                        </button>
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
<!--                                变量循环数据-->
                                <tr th:each="type :${types.getList()}">
                                    <td  class="text-center typeId" th:text="${type.id}"></td>
<!--                         分类名字-->
                                    <td class="typevalue" th:text="${type.name}">前端</td>

                                    <td class="text-center">
<!--                                        修改按钮-->
                                        <button name="update"   class="btn btn-xs btn-success" data-toggle="modal"
                                                data-target="#updateCategoryModal">
                                            <i class="fa fa-edit"></i>
                                            修改
                                        </button>
<!--                                        删除按钮-->
                                        <button name="del" class="btn btn-xs btn-danger ml-2" data-toggle="modal"
                                                data-target="#deleteCategoryModal">
                                            <i class="fa fa-trash"></i>
                                            删除
                                        </button>
                                    </td>

                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-end">

                                <li  th:if="${types.hasPreviousPage}" class="page-item ">
                                    <a  class="page-link"  th:href="'/admin/type-mgr?pageNum='+${types.prePage}"  tabindex="-1" aria-disabled="true">Previous</a>
                                </li>
                                <li th:each="num:${types.navigatepageNums}" class="page-item">
                                    <a class="page-link" th:href="'/admin/type-mgr?pageNum='+${num}" th:text="${num}"></a>
                                </li>

                                <li  class="page-item">
                                    <a th:if="${types.hasNextPage}" class="page-link"  th:href="'/admin/type-mgr?pageNum='+${types.nextPage}"  tabindex="-1" aria-disabled="true">Next</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <p class="text-center mb-1">
            Copyright © 2020 ZengZK Designed by ZengZK Powered by AdminLTE
        </p>
        <p class="text-center">
            <a href="">粤ICP备20040058号</a>
        </p>
    </footer>
</div>
<!-- ./wrapper -->

新增分类
<div class="modal fade" id="addCategoryModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新增分类</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
<!--                新增的内容-->
                <input type="text" id="categoryInput" name="category" value=""/>
            </div>

            <div class="modal-footer">
                <div id="addContent" style="color: red" ></div>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="addType"  type="button" class="btn btn-success" >新增</button>

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="updateCategoryModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改分类</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input class="form-control" type="text" id="typeUpdate" name="category" value="前端">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<!--                修改按钮-->
                <button id="updateCategoryBtn" type="button" class="btn btn-success">修改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="deleteCategoryModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">删除分类</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="m-0">你确定要删除吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="deleteCategoryBtn" type="button" class="btn btn-danger">删除</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- jQuery -->
<script th:src="@{/plugins/jquery/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>

<script th:src="@{/plugins/selectize/js/standalone/selectize.min.js}"></script>


<!-- AdminLTE App -->
<script th:src="@{/js/adminlte.min.js}"></script>
<!--<script th:src="@{/js/categoryinput.init.js}"></script>-->

<script type="text/javascript">

  $("[name='update']").click(function(){

   //   获取当前按钮所在的tr中的typeValue值
   $('#typeUpdate').val($(this).parents("tr").find(".typevalue").text());
   //获取分类的值
      var typeId=$(this).parents("tr").find(".typeId").text();
     // alert(typeId);
    //当点击修改的时候，AJAX返回到后台
    $('#updateCategoryBtn').click(function () {

        //获取新输入的数据
        var updateContent =$('#typeUpdate').val();

        $.ajax({
        url: '/admin/typeUpdate?id='+typeId+'&name='+updateContent,
        success:function(res){
            console.log(res);
           if(res==1)
               window.location='/admin/type-mgr';
           else
           {
               window.location='/admin/type-mgr';
               alert("修改失败！");
           }
        }
        })


    })


  })



$("[name='del']").click(function(){

    //获取分类的id
    var typeId=$(this).parents("tr").find(".typeId").text();
    // alert(typeId);
    //当点击修改的时候，AJAX返回到后台
    $('#deleteCategoryModal').click(function () {
        //成功删除
        $.ajax({
            url: '/admin/typeDelete?id='+typeId,
            success:function(res){
               // alert(res);
                if(res==666){
                    window.location='/admin/type-mgr';
                }
                else {
                    alert('删除失败');
                    window.location='/admin/type-mgr';
                }
            }
        })


    })


})

$('#addType').click(function(){
   typeName= $('#categoryInput').val();
   // alert(typeName);

   if(typeName.length===0){
       //alert(typeName.length);
       $('#addContent').html("内容不能为空！");
   }
   else {
     $.ajax({
         url: '/admin/addType?name='+typeName,
         success: function (res) {
             if(res==1){
                 $('#addContent').html("分类添加成功！");
                 window.location='/admin/type-mgr';
             }
             else if(res==2){
                 $('#addContent').html("该分类已经存在，请检查！");

             }
             else {
                 $('#addContent').html("分类添加失败！");
             }
         }
     })

   }
})

</script>

</body>
</html>
